<template>
  <div class="activity-manage-container">
    <el-card class="main-card" shadow="hover">
      <template #header>
        <div class="card-header">
          <h2>活动报名管理</h2>
        </div>
      </template>
      <div class="control-panel">
        <div class="search-section">
          <el-input
            v-model="search.title"
            placeholder="请输入活动名称"
            clearable
            prefix-icon="Search"
            @change="onSearchChange"
          />
          <el-input
            v-model="search.holdName"
            placeholder="请输入主办人姓名"
            clearable
            prefix-icon="User"
            @change="onSearchChange"
          />
        </div>

        <div class="filter-section">
          <el-select
            v-model="filter.status"
            placeholder="请选择状态"
            clearable
            @change="onFilterChange"
          >
            <el-option
              v-for="item in statusOptions.status"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-select
            v-model="filter.categoryId"
            placeholder="请选择分类"
            clearable
            @clear="onCategoryFilterChange"
            @click="getCategoryOptions"
          >
            <el-option
              @click="onFilterChange"
              v-for="item in categoryOptions"
              :key="item.id"
              :label="item.categoryName"
              :value="item.id"
            />
          </el-select>

          <el-button-group class="action-buttons">
            <el-button type="danger" :icon="Delete" @click="deleteAll"
              >删除所有选中</el-button
            >
            <el-button type="primary" :icon="RefreshRight" @click="getPage"
              >刷新数据</el-button
            >
          </el-button-group>
        </div>
      </div>

      <el-table
        ref="tableRef"
        @sort-change="sortChange"
        :data="tableData"
        border
        style="width: 100%"
        row-class-name="table-row"
        header-row-class-name="table-header"
        :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
        highlight-current-row
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="cover" label="活动图片" width="100px">
          <template #default="scope">
            <el-image
              :src="scope.row.cover"
              class="activity-img"
              fit="cover"
              :preview-src-list="[scope.row.cover]"
              preview-teleported
            />
          </template>
        </el-table-column>
        <el-table-column prop="title" label="活动名" width="150px" />
        <el-table-column prop="categoryName" label="活动分类" width="150px" />
        <el-table-column prop="holdName" label="主办人" width="150px" />
        <el-table-column prop="holdPhone" label="联系电话" width="150px" />
        <el-table-column prop="status" label="当前报名状态" width="150px">
          <template #default="scope">
            <el-tag
              :type="statusMap[scope.row.status]?.type || 'info'"
              effect="dark"
              size="large"
              class="status-tag"
            >
              {{ statusMap[scope.row.status]?.text || "未知状态" }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          sortable
          prop="amount"
          label="参与人数限制"
          width="150px"
        >
          <template #default="scope">
            <el-text class="mx-1" type="danger">{{ scope.row.amount }}</el-text>
          </template>
        </el-table-column>
        <el-table-column prop="detailAddress" label="举办位置" width="150px">
        </el-table-column>
        <el-table-column label="开始时间" width="150px" prop="startTime">
          <template #default="{ row }">
            {{ row.startTime }}
          </template>
        </el-table-column>
        <el-table-column label="结束时间" width="150px" prop="endTime">
          <template #default="{ row }">
            {{ row.endTime }}
          </template>
        </el-table-column>
        <el-table-column sortable label="取消报名时间" width="150px">
          <template #default="scope">
            {{ scope.row.cancelTime }}
          </template>
        </el-table-column>
        <el-table-column sortable label="报名时间" width="150px">
          <template #default="scope">
            {{ scope.row.signupTime }}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="150">
          <template #default="scope">
            <div class="action-column">
              <el-tooltip content="编辑活动" placement="top">
                <el-button
                  type="primary"
                  size="small"
                  :icon="Edit"
                  circle
                  @click="editRow(scope)"
                />
              </el-tooltip>
              <el-tooltip content="删除活动" placement="top">
                <el-button
                  type="danger"
                  size="small"
                  :icon="Delete"
                  circle
                  @click="deleteRow(scope)"
                />
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total"
          :default-page-size="pagination.size"
          background
          @change="onPaginationChange"
        />
      </div>
      <el-dialog
        class="custom-dialog"
        v-model="EditDialog.isVisible"
        :title="EditDialog.title"
        width="50%"
        align-center
        destroy-on-close
      >
        <el-form label-width="120px" label-position="left" class="edit-form">
          <el-form-item label="参与者姓名">
            <el-input disabled v-model="EditForm.username" />
          </el-form-item>
          <el-form-item label="主办人姓名">
            <el-input disabled v-model="EditForm.holdName" />
          </el-form-item>
          <el-form-item label="主办人电话">
            <el-input disabled v-model="EditForm.holdPhone" />
          </el-form-item>
          <el-form-item label="举办位置">
            <el-input disabled v-model="EditForm.detailAddress" />
          </el-form-item>
          <el-form-item label="活动名称">
            <el-input disabled v-model="EditForm.title" />
          </el-form-item>
          <el-form-item label="活动报名状态">
            <el-radio-group v-model="EditForm.status">
              <el-radio-button :value="0">已报名</el-radio-button>
              <el-radio-button :value="1">取消报名</el-radio-button>
              <el-radio-button :value="2">已签到</el-radio-button>
              <el-radio-button :value="3">未签到</el-radio-button>
              <el-radio-button :value="4">已参加</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="EditForm.remark" />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="EditDialog.isVisible = false">取消</el-button>
            <el-button type="primary" @click="save">保存</el-button>
          </div>
        </template>
      </el-dialog>
    </el-card>
  </div>
</template>

<!-- <template>

 
</template> -->

<script setup>
import { getFormatTime } from "@/apis/utility";
import {
  activitySignupPage,
  activitySignupDeleteByUserId,
  activitySignupDeleteBatch,
  activitySignupEdit,
} from "@/apis/admin/activity-signup";
import { reactive, onMounted, ref } from "vue";
import {
  Delete,
  Edit,
  Plus,
  View,
  Search,
  User,
  RefreshRight,
} from "@element-plus/icons-vue";
import { getAllCategory } from "@/apis/admin/category";
import { ElMessage, ElMessageBox } from "element-plus";
// 存储活动报名数据
const tableData = ref([]);

// 分页
const pagination = reactive({
  page: 1,
  size: 10,
  total: 0,
});

// 搜索输入框搜索条件
const search = reactive({
  title: "",
  holdName: "",
});

// 过滤对应的条件
const filter = reactive({
  status: null,
  categoryId: null,
});

// 活动状态对应的选项
const statusOptions = reactive({
  status: [
    {
      label: "已报名",
      value: "0",
    },
    {
      label: "取消报名",
      value: "1",
    },
    {
      label: "已签到",
      value: "2",
    },
    {
      label: "未签到",
      value: "3",
    },
    {
      label: "已参加",
      value: "4",
    },
  ],
});
// 活动分类
const categoryOptions = ref([]);
// 获取活动分类
const getCategoryOptions = async () => {
  getAllCategory().then((result) => {
    categoryOptions.value = result.data;
    // console.log(result);
  });
};
// 活动改变时触发
const onCategoryFilterChange = async () => {
  await getCategoryOptions();
  filter.categoryId = null;
  onFilterChange();
};

// 存储排序字段
const orders = reactive({
  column: "id",
  isAsc: true,
});

// 获取数据
const getPage = () => {
  activitySignupPage(
    {
      filter: filter,
      search: search,
      orders: [orders],
    },
    pagination.page,
    pagination.size
  ).then((result) => {
    tableData.value = result.data.records;
    pagination.total = result.data.total;
  });
};

// 分页改变时触发
const onPaginationChange = (currentPage, pageSize) => {
  pagination.page = currentPage;
  pagination.size = pageSize;
  getPage();
};
// 页面加载时执行
onMounted(() => {
  getPage();
});
// 搜索输入框对应的触发事件
const onSearchChange = () => {
  getPage();
};
const onFilterChange = () => {
  getPage();
};

/**
 * 表格排序函数
 * @param {*} column 当前列对
 * @param {*} prop 当前字段
 * @param {*} order 当前排序方式
 */
const sortChange = ({ prop, order }) => {
  Object.assign(orders, {
    column: prop,
    isAsc: order === "ascending",
  });
  getPage();
};

const tableRef = ref();
/**
 * 删除全部选中行
 */
const deleteAll = async () => {
  const selectionRows = tableRef.value.getSelectionRows();
  const ids = selectionRows.map((row) => {
    return row.id;
  });
  // 删除请求函数
  await activitySignupDeleteBatch(ids).then((result) => {});
  getPage();
};

//删除一行
const deleteRow = (scope) => {
  ElMessageBox.confirm(
    `确定要删除 "${scope.row.title}" 活动的报名记录吗？`,
    "删除确认",
    {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }
  )
    .then(() => {
      activitySignupDeleteByUserId(scope.row.id).then(() => {
        ElMessage({
          type: "success",
          message: "删除成功",
        });
        getPage();
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消删除",
      });
    });
};

/**
 * 修改表格数据
 */
const EditForm = ref({});

/**
 * 修改的对话框
 */
const EditDialog = reactive({
  isVisible: false,
  title: "",
});

//修改当前行的数据
const editRow = (scope) => {
  EditDialog.isVisible = true;
  EditDialog.title = "修改";
  Object.assign(EditForm.value, scope.row);
  console.log(EditForm.value);
};

// 按下编辑保存按钮
const save = async () => {
  await activitySignupEdit(EditForm.value).then((result) => {
    ElMessage({
      type: "success",
      message: "保存成功",
    });
  });
  EditDialog.isVisible = false;
  getPage();
};
// 报名活动状态
const statusMap = {
  0: { text: "已报名", type: "primary" },
  1: { text: "取消报名", type: "danger" },
  2: { text: "已签到", type: "success" },
  3: { text: "未签到", type: "warning" },
  4: { text: "已参加", type: "info" },
};
</script>
<style scoped lang="less">
.activity-manage-container {
  padding: 20px;

  .main-card {
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 0 16px 0;

      h2 {
        margin: 0;
        font-size: 20px;
        font-weight: 600;
        color: #303133;
      }
    }
  }

  .control-panel {
    margin-bottom: 20px;

    .search-section {
      display: flex;
      gap: 16px;
      margin-bottom: 16px;

      .el-input {
        max-width: 250px;
      }
    }

    .filter-section {
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
      align-items: center;

      .el-select {
        max-width: 200px;
      }

      .action-buttons {
        margin-left: auto;
      }
    }
  }

  .table-header {
    font-weight: 600;
  }

  .table-row:hover {
    background-color: #f5f7fa;
  }

  .activity-img {
    width: 60px;
    height: 60px;
    border-radius: 6px;
    object-fit: cover;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;

    &:hover {
      transform: scale(1.1);
    }
  }

  .status-tag {
    font-weight: 600;
  }

  .action-column {
    display: flex;
    justify-content: space-around;
    gap: 8px;
  }

  .pagination {
    margin-top: 20px;
    display: flex;
    justify-content: center;
  }

  .custom-dialog {
    .edit-form {
      padding: 20px;
    }

    .dialog-footer {
      display: flex;
      justify-content: flex-end;
      gap: 12px;
      padding: 20px 0 0 0;
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .control-panel {
    .search-section,
    .filter-section {
      flex-direction: column;

      .el-input,
      .el-select {
        max-width: 100%;
      }

      .action-buttons {
        margin-left: 0;
        margin-top: 16px;
      }
    }
  }
}
</style>
